<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>用户注册</title>
  <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
  <link rel="stylesheet" href="${path}/css/userRegisterStyle.css" type="text/css" media="all" />
</head>
<style>

    .form-inner-cont input,
    .form-inner-cont textarea {
        width: 100%;
        font-size: 16px;
        line-height: 25px;
        color: #333;
        padding: 20px 40px;
        font-family: inherit;
        text-align: left;
        background: rgba(255, 154, 66, 0.02);
        border-radius: 10px;
    }
  #bottom{
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .fullscreenvideo {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      -webkit-transition: 1s opacity;
      transition: 1s opacity;
  }

  .videocontainer{
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -100;
  }

  .videocontainer:before{
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      z-index: -1;
      top: 0;
      left: 0;
      background: rgba(25,29,34,.10);
  }
    .Box{
    height:480px;
        width:450px;
        background: rgba(255,255,255,.3 );
        display: flex;
        flex-direction: column;
        justify-self:center;
        align-items: center;
        border-radius: 25px;
    }
    .sexChoose{
        width: 80px;
        height: 30px;
        display: flex;
        flex-direction: row;
    }
    .layui-btn{
        background: rgba(255,255,255,.3);
    }
</style>
<body>
<div class="videocontainer">
    <video class="fullscreenvideo" poster="__ROOT__/Themes/tdt/Asset/images/loginbg.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
        <source src="${path}/images/product/白色的沙滩与海洋.mp4" type="video/mp4">
    </video>
</div>
  <!-- simple-contact-form2 -->
  <section class="w3l-simple-contact-form2">

    <div class="section-gap">
      <div class="wrapper">
        <form action="  ${pageContext.request.contextPath}/user/register" method="post" class="signin-form">
        <div class="form-inner-cont">


            <h3>注册</h3>
            <div style="width: 300px;margin: 0 auto;text-align: center;color: red">${msg}</div>
            <div class="Box">
            <div class="form-input">
              <label for="w3lName">用户名</label>
              <input type="text" name="username" id="w3lName" placeholder="请输入用户名" required="" />
            </div>
            <div class="form-input">
              <label for="w3lSender">用户密码</label>
              <input type="text" name="password" id="w3lSender" placeholder="请输入密码" required />
            </div>
            <div class="form-input">
              <label for="w3lSubject">手机号</label>
              <input type="text" name="phonenumber" id="w3lSubject" placeholder="请输入手机号" required />
            </div>
            <div class="form-input">
            <label for="w3lSubject">昵称</label>
            <input type="text" name="nickname" id="w3lphoneNumber" placeholder="请输入昵称" required />
            </div>
                <div class="sexChoose">
                <input type="radio" name="gender"  checked="checked" value="男" />男
                <input type="radio" name="gender"   value="女"/>女
               </div>

            </div>
        </div>
        <div id="bottom">


        <div class="layui-form-item">
          <label class="layui-form-label">头像</label>
          <div class="layui-input-block">
            <div class="layui-upload" style="padding-bottom: 30px">
                <div>请选择头像</div>
                <input name="file" size="50" type="file" onchange="upload(this)" required>
                <div style="width: 200px;height: 150px">
                    <img id="pic" style="width: 140px;height: 155px;margin-bottom: 30px;">
                </div>
                <input id="headImg" type="hidden" name="headImg" value="">
            </div>
          </div>
        </div>
<%--        <input type="hidden" name="headImg" id="headImg" value="">--%>
        <div style="text-align: center;padding-bottom: 50px">
          <button class="layui-btn" style="height:40px;width: 80px">点击注册</button>

        </div>

      </div>
        </form>
        </div>
    </div>
  </section>
  <!-- /simple-contact-form2 -->
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/layui/layui.all.js"></script>
<script>

  function upload(e){
      let pic = e.files[0];
      let form = new FormData();
      form.append("file",pic);

      let xhr = new XMLHttpRequest();
      xhr.open("post","${pageContext.request.contextPath}/common/upload");
      xhr.send(form);
      xhr.onreadystatechange = function (){
          if(xhr.readyState==4&&xhr.status==200){
              //将服务上传成功的返回字符串转成JSON
              let result = JSON.parse(xhr.responseText);
              //获取服务器返回的图片地址
              let url = result.data[0].url
              //获取显示封面的img标签
              let img = document.getElementById("pic");
              //修改img的样式，让img显示
              img.style.display = "block";
              //修改img的地址，让封面图片显示
              img.src = url;
              //将服务器返回的图片地址写入的表单隐藏域中
              document.getElementById("headImg").value = url;
          }
      }


  function checkUsername(e) {
    let username = e.value;
    //发送ajax请求验证用户名是否存在
    let xhr = new XMLHttpRequest();
    //open
    xhr.open("post","${pageContext.request.contextPath}/user/checkUsername")
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send("username="+username)
    xhr.onreadystatechange = function (){
      if(xhr.readyState==4&&xhr.status==200){
        document.getElementById("msg").innerText = xhr.responseText;
      }
    }
  }
      var video= document.getElementById('v1');
      video.playbackRate = 0.5;}
</script>
</html>